Displaying Image Thumbnails

Latest update: July 2013

In this tutorial, we will show you how to get thumbnail images of files on your FlashAir. We will use thumbnail.cgi and command.cgi to do this.

This tutorial follows iOS Tutorial 3: Downloading Content in the FlashAir iOS app tutorial series.

Creating the Screen Layout

We will create a content list that displays thumbnails of the image file contents like this:

The screen layout for the other portion of this application (showing the image that was clicked) is the same as in iOS Tutorial 3: Downloading Content. Please see that page for implementation details.

Writing Code

Thumbnail View

We get thumbnail images of the content by giving the file path of the image to thumbnail.cgi. We save the data that the command returns using NSData dataWithContentsOfURL . This function will return the data object.

We will still use the Table View Cell that was previously used because it has imageView as a property. We will set it as the destination for the image data.

In the previous tutorial, iOS Tutorial 3: Downloading Content, we used the function - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{}. This function has an if statement that checks to see if the file is not an image file. It had no else portion (that would account for files that are image files). We will add an else statement to catch image files and fetch their thumbnails.

FSViewController.m

NSString *dir = [[[files objectAtIndex:indexPath.row + 1] componentsSeparatedByString:@","] objectAtIndex:0];    

// Make url
NSString *filePath = [[dir stringByAppendingString:@"/"] stringByAppendingString:filename];
NSURL *url = [NSURL URLWithString:[@"http://flashair/thumbnail.cgi?" 
                                                            stringByAppendingString:filePath]];
// Run CGI
NSData *img_data = [NSData dataWithContentsOfURL:url];
// Display results
cell.imageView.image = [[UIImage alloc] initWithData:img_data];

• At line 1:
  We concatenate dir, the folder path, and filename, the file name, to create a path to the image file.
• At lines 4-5:
  We take http://flashair/thumbnail.cgi? and add the file path we created to make the URL for the command.
• At lines 8:
  The image data is fetched from the URL
• At lines 10:
  We store the image data we acquired in cell.imageView

Result

Once we finish writing the program, we will check to see if it works. We select the folder that contains the image we would like to download. We will see the image thumbnails next to the file names. We want to make sure that the thumbnail matches the image file.

The thumbnail in question matches the image displayed.

You have now completed the tutorial on getting and displaying image thumbnails.

Sample Code

ios_tutorial_04.zip (25KB)

All sample code on this page is licensed under BSD 2-Clause License